<template>
  <div class="list">
    <el-card>
      <div class="topBox">
        <div class="topInput">
          <el-form style="width: 100%" ref="formRef" :model="searchData">
            <el-row>
              <el-col :span="6">
                <el-form-item label="标签名称" class="iscenter" prop="tags">
                  <el-input
                    placeholder="请输入"
                    size="small"
                    v-model="searchData.tags"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市" class="iscenter" prop="province">
                  <el-select
                    placeholder="请选择"
                    size="small"
                    v-model="searchData.province"
                    @change="provincesChange"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="item in provincesList"
                      :key="item"
                      :label="item"
                      :value="item"
                      style="width: 300px"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="地区" class="iscenter" prop="city">
                  <el-select
                    placeholder="请选择"
                    size="small"
                    v-model="searchData.city"
                    @change="citysChange"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="item in citysList"
                      :key="item"
                      :label="item"
                      :value="item"
                      style="width: 300px"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="企业名称"
                  class="iscenter"
                  prop="shortName"
                >
                  <el-input
                    size="small"
                    v-model="searchData.shortName"
                    style="width: 300px"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="状态" class="iscenter" prop="state">
                  <el-select
                    placeholder="请选择"
                    size="small"
                    v-model="searchData.state"
                    @change="stateChange"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="item in stateList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                      style="width: 300px"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="padding-left: 13px">
                  <el-button size="small" @click="clean">清除</el-button>
                  <el-button type="primary" size="small" @click="search"
                    >搜索</el-button
                  >
                </el-form-item></el-col
              >
              <el-col :span="12">
                <el-form-item style="text-align: right" class="rightBut">
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    size="small"
                    @click="add"
                    >新增用户</el-button
                  >
                </el-form-item></el-col
              >
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="infoBox">
        <el-alert
          :title="'共 ' + counts + ' 条记录'"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <div class="bodyBox">
        <el-table :data="initData">
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="企业编号" prop="number"></el-table-column>
          <el-table-column label="企业简称" prop="shortName"></el-table-column>
          <el-table-column label="标签" prop="tags"></el-table-column>
          <el-table-column label="创建者" prop="creatorID"></el-table-column>
          <el-table-column label="创建日期" prop="addDate"></el-table-column>
          <el-table-column label="备注" prop="remarks"></el-table-column>

          <el-table-column label="状态">
            <template #default="scope">
              <span>{{ scope.row.state ? "启用" : "禁用" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="twoBtn">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editBtn(scope)"
                  plain
                ></el-button>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="禁用"
                  placement="top"
                >
                <!-- 0 对  1 错 -->
                  <el-button
                    :type="scope.row.state ? 'warning' : 'success'"
                    :icon="scope.row.state ? 'el-icon-close' : 'el-icon-check'"
                    circle
                    @click="disable(scope)"
                    plain
                  ></el-button>
                </el-tooltip>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteBtn(scope)"
                  plain
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="prev, pager, next,sizes, jumper"
          :total="counts"
          background
        >
        </el-pagination>
      </div>
      <div class="dialogBox">
        <el-dialog
          :title="title"
          :visible.sync="editShowDialog"
          width="50%"
          label-width="100px"
        >
          <el-form
            :model="editData"
            label-width="160px"
            :rules="editDataRules"
            ref="formRef1"
          >
            <el-form-item label="企业名称" prop="shortName">
              <el-input
                v-model="editData.shortName"
                style="width: 570px"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属公司" prop="company">
              <el-input
                v-model="editData.company"
                style="width: 570px"
              ></el-input>
              <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
            </el-form-item>
            <el-form-item label="城市地区" prop="province">
              <el-select
                placeholder="请选择"
                size="small"
                v-model="editData.province"
                @change="provincesChange"
                style="width: 270px; margin-right: 20px"
              >
                <el-option
                  v-for="item in provincesList"
                  :key="item"
                  :label="item"
                  :value="item"
                  style="width: 270px; margin-right: 20px"
                >
                </el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                size="small"
                v-model="editData.city"
                @change="citysChange"
                style="width: 270px"
              >
                <el-option
                  v-for="item in citysList"
                  :key="item"
                  :label="item"
                  :value="item"
                  style="width: 270px"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向(企业标签)" prop="tags">
              <el-input v-model="editData.tags" style="width: 570px"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model="editData.remarks"
                style="width: 570px"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editShowDialog = false">取 消</el-button>
            <el-button type="primary" @click="saveEditBtn">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  list,
  detail,
  update,
  remove,
  disabled,
  add,
} from "@/api/hmmm/companys";
import { provinces, citys } from "@/api/hmmm/citys";
export default {
  data() {
    return {
      initData: [],
      params: {
        page: 1,
        pagesize: 10,
      },
      searchData: {
        tags: "",
        province: "",
        city: "",
        shortName: "",
        state: "",
      },
      counts: null,
      provincesList: [], //城市
      citysList: [], //城市下市区
      stateList: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],
      title: "",
      editShowDialog: false,
      data: {
        id: "",
      },
      editData: {},
      editDataRules: {
        shortName: [
          { required: true, message: "企业名称不能为空", trigger: "blur" },
        ],
        company: [
          { required: true, message: "所属公司不能为空", trigger: "blur" },
        ],
        province: [
          { required: true, message: "城市不能为空", trigger: "blur" },
        ],
        tags: [{ required: true, message: "请输入标签", trigger: "blur" }],
        remarks: [{ required: true, message: "备注不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getInitData();
    this.provincesList = provinces();
  },
  methods: {
    //获取初始化数据
    async getInitData() {
      const res = await list(this.params);
      this.counts = res.data.counts;
      this.initData = res.data.items;
      // state 1 启用 错误 0 禁用 对
    },
    // 所有城市 点击
    provincesChange(val) {
      //获取到城市之后，拿到城市名后就发送请求该市地区
      this.citysList = citys(val);
      this.searchData.province = val;
    },
    // 城市下市区  点击
    citysChange(val) {
      this.searchData.city = val;
    },
    // 状态  点击
    stateChange(val) {
      this.searchData.state = val;
    },
    // 清除按钮
    clean() {
      this.$refs.formRef.resetFields();
    },
    // 搜索按钮
    async search() {
      const res = await list(this.searchData);
      this.counts = res.data.counts;
      this.initData = res.data.items;
    },
    // 编辑按钮
    async editBtn(row) {
      this.editShowDialog = true;
      this.title = "编辑用户";
      this.data.id = row.row.id;
      const res = await detail(this.data);
      this.editData = res.data;
      this.searchData.province = this.editData.province;
      this.searchData.city = this.editData.city;
      if (this.editData.isFamous === 1) {
        this.editData.isFamous = true;
      } else {
        this.editData.isFamous = false;
      }
    },
    async saveEditBtn() {
      this.editShowDialog = false;
      if (this.title === "编辑用户") {
        await update(this.editData);
      } else if (this.title === "创建用户") {
        if (this.editData.isFamous === 1) {
          this.editData.isFamous = true;
        } else {
          this.editData.isFamous = false;
        }
        await add(this.editData);
      }
      this.getInitData();
    },
    // 删除按钮
    deleteBtn(row) {
      this.data.id = row.row.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove(this.data);
          this.getInitData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 禁用按钮
    disable(row) {
      // state 1 启用 错误 0 禁用 对   、、 0  启用 传值1   1 禁用 传值 0 
      // console.log(row.row.state);
      this.data.id = row.row.id;
      if (row.row.state === 0) {
        console.log(row.row.state,'启用');
        this.$confirm("已成功启用, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await disabled({id:this.data.id,state:0})
            this.getInitData();
            this.$message({
              type: "success",
              message: "已成功启用!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消启用",
            });
          });
      } else if (row.row.state === 1){
        console.log(row.row.state,'禁用');
        this.$confirm("已成功禁用, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await disabled({id:this.data.id,state:1})
            this.getInitData();
            this.$message({
              type: "success",
              message: "已成功禁用!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消禁用",
            });
          });
      }
    },
    // 新增
    add() {
      this.editShowDialog = true;
      this.title = "创建用户";
      this.$refs.formRef1.resetFields();
    },
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getInitData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getInitData();
    },
  },
};
</script>

<style scoped lang="scss">
.list {
  padding: 20px;
  .topBox {
    padding-top: 10px;
    .topInput {
      display: flex;
    }
  }
  .footerBox {
    display: flex;
    justify-content: right;
  }
}
.iscenter {
  display: flex;
  justify-content: space-between;
}
.rightBut {
  display: flex;
  justify-content: right;
}
.item {
  margin: 4px;
}
</style>
